<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<!-- import CSS -->
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<!-- import Vue before Element -->
		<script src="/html/vue.js"></script>
		<!-- import JavaScript -->
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
	</head>
	<body>
		<div id="app" style='width: 100%; height: 100%;'>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>登录</span>
					<el-button style="float: right; padding: 3px 0" type="text">登录页面</el-button>
				</div>
				<!-- <div v-for="o in 4" :key="o" class="text item">
			    {{ '列表内容 ' + o }}
			  </div> -->
				<el-row>
					<el-col :span="12" style='padding-top: 4px;'>用户名：</el-col>
					<el-col :span="12">
						<el-input v-model="username" placeholder="请输入账号"></el-input>
					</el-col>
				</el-row>

				<el-row style='margin-top: 20px;'>
					<el-col :span="12" style='padding-top: 4px;'>密码：</el-col>
					<el-col :span="12">
						<el-input placeholder="请输入密码" v-model="password" show-password></el-input>
					</el-col>
				</el-row>
				<el-row>
					<div class="block" style="margin-top: 5px; margin-bottom: 5px;">
						<el-slider v-model="value3" :show-tooltip="false"></el-slider>
					</div>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-button v-on:click="go()" style='width: 100px;'>登录</el-button>
					</el-col>
				</el-row>

			</el-card>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {
						username: "",
						password: "",
						value3: 0,
					}
				},
				methods: {
					go() {
						var me = this;
						if (me.value3 != 100) {
							this.$message.error('请验证滑块！');
							return
						}
						const params = new URLSearchParams();
						params.append("username", me.username);
						params.append("password", me.password);
						axios({
							method: 'post',
							url: '/index.php/server/login/is_login',
							hheaders: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: params
						}).then(function(response) {
							//console.log(response);
							if (response.data.code == 200) {
								me.$message('登录成功！');
								//用户名写入缓存
								sessionStorage.setItem("name", me.username);
								window.location.href = "/index.php/admin_to/admin";
							} else {
								me.$message.error('用户名或密码错误！');
							}
						});
					}
				}
			})
		</script>
		<style>
			.text {
				font-size: 14px;
			}

			.item {
				margin-bottom: 18px;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both
			}

			.box-card {
				width: 480px;
				margin-top: 200px;
				margin-left: 500px;
			}
		</style>
	</body>
</html>
